<template>
  <van-nav-bar title="订单详情" left-text="返回" left-arrow @click-left="back" />
  <div class="jd-qrdd-bigbox">
    <!--商品地址管理部分-->
    <div class="indent-details-box" @click="express(info.id)">
      <span class="indent-details-img1"></span>
      <span class="indent-details-text1">{{ info.status_text }}</span>
      <span class="indent-details-text2">{{ info.express.AcceptStation }}</span>
      <span class="indent-details-text3">{{ info.express.AcceptTime }}</span>
    </div>
    <!--地址部分-->
    <div class="jd-qrdd-a1">
      <span class="qrdd-a1-t1">{{ info.address.consignee }}</span>
      <span class="qrdd-a1-t1">{{ info.address.mobile }}</span>
      <span class="qrdd-a1-t2" v-show="info.address.status == 1">默认地址</span>

      <div class="qrdd-a1-b1">
        <span class="qrdd-a1-img1"></span>
        <span class="qrdd-a1-t3">{{ info.address.region_text }} {{ info.address.address }}</span>
      </div>
      <span class="qrdd-a1-img2"></span>
    </div>
    <!--商品部分-->
    <div class="zjzz-buylist-goods1" v-for="item in info.proData">
      <div class="zjzz-buylist-det">
        <img :src="item.products.thumb_text" />
        <div class="zjzz-buylist-gdetail">
          <span class="zjzz-buylist-gtit1">{{ item.products.name }}</span>
          <span class="zjzz-buylist-gmoney">
            <i class="zjzz-buylist-gm1">￥{{ item.total }}</i>
            <i class="zjzz-buylist-gm2">x{{ item.pronum }}</i>
          </span>
          <van-tag plain type="primary" size="medium">{{ item.products.flag_text }}</van-tag>

        </div>
      </div>
      <div class="zjzz-buylist-btn">
        <a class="zjzz-buylist-btn3">申请售后</a>
      </div>
    </div>
    <!--商品金额部分-->
    <div class="indent-details-box2">
      <span class="indent-details-text4">应付总额</span>
      <span class="indent-details-text5">￥{{ info.amount }}</span>
    </div>
    <div class="indent-details-box2">
      <span class="indent-details-text4 tcolor-grey">商品总价</span>
      <span class="indent-details-text5 tcolor-black">￥{{ info.amount }}</span>
    </div>
    <div class="indent-details-box2">
      <span class="indent-details-text4 tcolor-grey">运费</span>
      <span class="indent-details-text5 tcolor-black">￥0.00</span>
    </div>
    <div class="indent-details-box2">
      <span class="indent-details-text4 tcolor-grey">税费</span>
      <span class="indent-details-text5 tcolor-black">￥0.00</span>
    </div>
    <div class="indent-details-box2">
      <span class="indent-details-text4 tcolor-grey">发票信息</span>
      <span class="indent-details-text5 tcolor-black">不需要发票</span>
    </div>
    <!--订单编号部分-->
    <div class="indent-details-box3">
      <p>订单编号:{{ info.code }}</p>
      <p>支付方式:支付宝</p>
      <p>支付交易单号:201711024866544846144</p>
      <p>下单时间:{{ info.createtime_text }}</p>
    </div>
  </div>
</template>
<script setup>
//相当于vue2 选项式API当中的 this对象
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
//获取到用户的信息
var business = reactive(proxy.$cookies.get('business'))

//返回
const back = () => {
  proxy.$router.go(-1)
  return false
}

// 订单列表界面传递进来的订单id
const orderid = ref(0);

// 响应式  订单详情数据（总数据集）
const info = ref({
  express:{},
  address:{}
});

onBeforeMount(() => {
  // 获取路由跳转传参
  orderid.value = proxy.$route.query.orderid ? proxy.$route.query.orderid : 0;
  // 获取订单详细信息
  getorderInfoData();
});

// 获取订单详细信息
let getorderInfoData = async () => {
  // 组装数据
  var data = {
    busid: business.id,
    orderid: orderid.value,
  }

  // 发起请求
  var result = await proxy.$POST({
    url: '/order/info',
    params: data
  })

  if (result.code == 0) {
    proxy.$fail(result.msg);
    return false
  } else {
    info.value = result.data;
  }
};

//查看物流
let express = orderid => {
    proxy.$router.push({
        path: '/order/express',
        query: { orderid: orderid }
    })
}

</script>
<style>
@import url("/assets/css/indent-details.css");
</style>
